<%= if Enum.any?(@token_balances) do %>
  <a
      href="#"
      data-dropdown-toggle
      data-toggle="dropdown"
      role="button"
      id="dropdown-tokens"
      aria-haspopup="true"
      aria-expanded="false"
      style="text-decoration: none;">

     <i class="fas fa-chevron-down mr-2"></i>
     <span data-tokens-count><%= tokens_count_title(@token_balances) %></span>
  </a>
<% else %>
   <span data-tokens-count><%= tokens_count_title(@token_balances) %></span>
<% end %>

<div class="dropdown-menu dropdown-menu-right token-balance-dropdown p-0" aria-labelledby="dropdown-tokens">
  <div data-dropdown-items class="dropdown-items">
    <div class="position-relative">
      <svg class="position-absolute dropdown-search-icon" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg" width="16" height="17" class="dropdown-search-icon position-absolute">
        <path fill="#7DD79F" fill-rule="evenodd" d="M15.713 15.727a.982.982 0 0 1-1.388 0l-2.289-2.29C10.773 14.403 9.213 15 7.5 15A7.5 7.5 0 1 1 15 7.5c0 1.719-.602 3.284-1.575 4.55l2.288 2.288a.983.983 0 0 1 0 1.389zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z"></path>
      </svg>
      <%= text_input(
            :token_search,
            :name,
            class: "w-100 dropdown-search-field",
            'data-filter-dropdown-tokens': true,
            placeholder: gettext("Search tokens")
          ) %>
    </div>
    <%= if Enum.any?(@token_balances, & &1.token.type == "ERC-721") do %>
      <%= render(
            "_tokens.html",
            conn: @conn,
            token_balances: filter_by_type(@token_balances, "ERC-721"),
            type: "ERC-721"
          ) %>
    <% end %>

    <%= if Enum.any?(@token_balances, & &1.token.type == "ERC-20") do %>
      <%= render(
            "_tokens.html",
            conn: @conn,
            token_balances: filter_by_type(@token_balances, "ERC-20"),
            type: "ERC-20"
          ) %>
    <% end %>
  </div>
</div>
